<template>
  <div class="tw-libmenunav">
    <div class="tw-menu-flex" :style="{width: menuWidth,height: menuHeight}" style="box-shadow: 0px 5px 5px #cccccc;">
        <el-row class="tac" :style="{width: leftWidth}" style="height: 100%">
          <el-menu
          :default-active="value"
          class="el-menu-vertical-demo"
          @select="selectValue"
          >
            <el-menu-item
              ref="menuItem"
              :index="item.cataId"
              v-for="item in menuList"
              @click.native="changeValue($event, item)"
              :class="{'actives': value === item.cataId}"
              :key="item.cataId">
              <span slot="title" style="display: inline-block; width: 80%;" @mouseenter="changeEnter($event, item.cataId)"
              @mouseleave="changeLeave($event, item.cataId)">{{item.cataName}}</span>
            </el-menu-item>
          </el-menu>
        </el-row>

        <div :style="{backgroundColor: bgColor,width: rightWidth}" style="height: 100%;overflow-y: auto; padding-top: 15px;">
          <div class="flot-left menu-wrap-item"
            v-for="item in menuList"
            :key="item.cataId">
            <div v-if="value === item.cataId">
              <ul class="tw-menu-flex" :class="{'tw-menu-flex-count1': item.children.length === 1, 'tw-menu-flex-count2': item.children.length === 2, 'tw-menu-flex-count3': item.children.length === 3}">
                <li class="tw-menu-third"
                v-for="itm in item.children"
                :key="itm.cataId">
                  <h3 class="menu-wrap-title" :style="{color: titleColor, fontSize: titleSize}">{{itm.cataName}}</h3>
                  <div v-if="itm.children && itm.children.length > 0">
                    <div v-for="it in itm.children"
                      :key="it.cataId">
                        <p v-if="it.children && it.children.length > 0" class="tw-menu-third-item">{{it.cataName}}</p>
                        <p v-else  @click="toChoose(it.cataId)" class="tw-menu-right">
                          {{it.cataName}}
                        </p>
                        <div v-if="it.children && it.children.length > 0">
                          <p v-for="ie in it.children" :key="ie.cataId" class="tw-menu-right" @click="toChoose(ie.cataId)">
                            <span>{{ie.cataName}}</span>
                          </p>
                        </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="float-clear"></div>
        </div>
    </div>
  </div>
</template>

<script>
import props from './props'

export default {
  name: 'lib-name',

  props,
  data () {
    return {
      value: '',
      dataList: [],
      menuShow: false,
      timer: 0
    }
  },
  methods: {
    setStyle () {
      let style = `
      .el-menu-item:focus {
        background-color: ${this.bgColor};
      }
      .tw-menu-third-item {
        padding: 4px 0 4px 8px;
        fontSize: ${this.thirdFontSize}
      }
      .el-menu-item {
        color: ${this.color};
        width: 100%;
      }
      .el-menu-vertical-demo .el-menu-item:hover {
        outline: 0;
        background-color: ${this.chooseBgColor};
        color: ${this.chooseColor};
      }
      .el-menu-item.actives {
        outline: 0;
        background-color: ${this.chooseBgColor};
        color: ${this.chooseColor};
      }
      .menu-wrap-item {
        color: ${this.color};
        width: 100%;
      }
      .tw-menu-third {
        color: ${this.color};
        font-size: ${this.thirdFontSize};
        margin-top: 10px;
        width: 100%;
        padding: 0 10px;
      }
      .tw-menu-right {
        display: block;
        text-align: left;
        line-height: 24px;
        padding: 4px 0 4px 8px;
        box-sizing: border-box;
        cursor: pointer;
        color: ${this.color};
      }
      .menu-wrap-item .tw-menu-right:hover {
        outline: 0;
        background-color: ${this.chooseBgColor};
        color: ${this.chooseColor};
      }
      `

      if (this.leftBgColor) {
        style += `
          .tw-libmenunav .el-menu {
            background-color: ${this.leftBgColor}; 
          }
        `
      }

      const styleEl = document.createElement('style')
      styleEl.innerText = style.replace(/\n/g, '')

      document.head.appendChild(styleEl)
    },
    changeEnter ($event, value) {
      this.$nextTick(() => {
        this.$emit('foucs', value)
        this.value = value
      })
    },
    changeLeave ($event, value) {
      //  window.clearTimeout(this.timer)
      // if (this.menuShow) {
      //   this.value = value
      //   this.menuShow = false
      // } else {
      //   this.timer = setTimeout(() => {
      //     this.menuShow = true
      //     this.changeLeave()
      //   }, 300)
      // }
      this.$nextTick(() => {
        this.value = value
      })
    },
    // lv3enter () {
    //   window.clearTimeout(this.timer)
    // },
    changeValue ($event, item) {
      this.$emit('choose', item.cataId)
      this.value = item.cataId
      // console.log('菜单组件暴露的cataId： ' + item.cataId)
    },
    selectValue (index) {
      this.value = index
      this.$nextTick(() => {
        this.menuList.forEach(item => {
          if (item.value === index && item.src) {
            this.$router.push({ path: item.src })
          }
        })
      })
    },
    // 选择第四级菜单的事件
    toChoose (reportPath) {
      // this.$emit('input', reportPath)
      this.$emit('toChoose', reportPath)
      // window.location.href=
      //   $twApp.gateway + '/unified-portal/cs-birt-site/report.html?reportPath=' + reportPath
      window.location.href = this.jumpUrl + reportPath
      // this.init()
      // console.log('menuList: ' + JSON.stringify(this.menuList))
    },
    init() {
      const vm = this
      const params = {}
      vm.dataList = []
      window.axios.post($twApp.gateway + this.reportInterfaceUrl, params)
        .then(resp => {
          if (resp.data.result.children && resp.data.result.children.length > 0) {
            vm.menuList = resp.data.result.children
            vm.dataList = resp.data.result.children
            this.value = resp.data.result.children[0].cataId
          }
        })
    }
  },

  computed: {
    style () {
      return {
        color: this.color,
        bgColor: this.bgColor,
        chooseBgColor: this.chooseBgColor,
        chooseColor: this.chooseColor,
        leftWidth: this.leftWidth,
        leftBgColor: this.leftBgColor,
        rightWidth: this.rightWidth,
        titleColor: this.titleColor,
        thirdColor: this.thirdColor,
        thirdFontSize: this.thirdFontSize,
        titleSize: this.titleSize,
        reportInterfaceUrl: this.reportInterfaceUrl,
        jumpUrl: this.jumpUrl,
        menuHeight: this.menuHeight
      }
    }
  },
  mounted () {
    this.init()
    this.setStyle()
  },

  watch: {
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  },
  beforeUpdate () {
    this.menuList = this.dataList
  },
  created () {
  }

}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
